<template>
  <div class="ty-container">
    <van-nav-bar
      :title="$route.meta.title"
      left-arrow
      fixed
      :border="false"
      @click-left="clickLeft"
      @click-right="clickRight"
    >
      <template #right>
        <van-icon name="filter-o" size="24" />
      </template>
    </van-nav-bar>

    <div class="content">
      <van-list
        v-model="loading"
        :immediate-check="false"
        :offset="1"
        :finished="finished"
        finished-text="暂无数据"
      >
        <van-swipe-cell v-for="(v, i) in list" :key="i" ref="swipecell">
          <van-cell
            :title="v.attributeName"
            is-link
            title-class="custom-title"
            value-class="custom-value"
            label-class="custom-label"
            @click.stop="(e) => handlerCellClick(e, v)"
          >
            <template #default>
              <van-tag v-if="v.warnState == 0" type="danger">超期未采</van-tag>
              <van-tag v-else-if="v.warnState == 1" type="warning"
                >今日采样</van-tag
              >
              <van-tag v-else-if="v.warnState == 2" type="primary"
                >等待采样</van-tag
              >
              <van-tag v-else type="default">未知状态</van-tag>
            </template>

            <template #label>
              <div>申请人：{{ v.applyUserName }}</div>
              <div>申请时间：{{ v.applyDate }}</div>
              <div>物料名称：{{ v.materialName }}</div>
              <div>规格：{{ v.materialStandard }}</div>
              <div>来源：{{ v.areaName }}</div>
              <div>紧急程度：{{ v.urgencyDegreeName }}</div>
            </template>
          </van-cell>
          <template #right>
            <van-button
              square
              block
              type="info"
              text="查看"
              style="height: 50%"
              @click.stop="seeInfo(v)"
            />
            <van-button
              square
              block
              type="danger"
              text="驳回"
              style="height: 50%"
              @click.stop="
                {
                  showTextarea = true;
                  testId = v.testID;
                }
              "
            />
          </template>
        </van-swipe-cell>
      </van-list>
    </div>
    <van-popup
      v-model="showFiltering"
      safe-area-inset-bottom
      get-container="body"
      position="right"
      style="width: 50vw; height: 100% !important"
    >
      <div class="popup-content">
        <div class="popup-content__content">
          <van-row>
            <van-col span="24">
              <van-field
                v-if="isRouterAlive"
                v-model="materialType"
                name="materialType"
                label="物料类型"
                input-align="center"
              >
                <template #input>
                  <material-type v-model="materialType" />
                </template>
              </van-field>
            </van-col>
            <van-col span="24">
              <van-field
                v-if="isRouterAlive"
                v-model="materialCode"
                name="materialCode"
                label="物料名称"
                input-align="center"
              >
                <template #input>
                  <material-name
                    :materialType="materialType"
                    v-model="materialCode"
                  />
                </template>
              </van-field>
            </van-col>
            <van-col span="24">
              <van-field
                v-if="isRouterAlive"
                v-model="emergencyDegree"
                name="emergencyDegree"
                label="紧急程度"
                input-align="center"
              >
                <template #input>
                  <urgency-degree v-model="emergencyDegree" />
                </template>
              </van-field>
            </van-col>
          </van-row>
        </div>

        <div class="popup-content__footer">
          <van-button block @click="handleReset">重置</van-button>
          <van-button
            native-type="button"
            type="info"
            block
            @click.stop="handleFilter"
            >筛选</van-button
          >
        </div>
      </div>
    </van-popup>
    <van-popup
      v-model="showPdf"
      safe-area-inset-bottom
      get-container="body"
      position="left"
      style="width: 60vw; height: 100% !important"
    >
      <div class="popup-content">
        <div class="popup-content__content" id="PDF" v-html="failMsg"></div>
				<HPDFViewer :path="pdfUrl" />
      </div>
    </van-popup>
    <van-popup
      v-model="showTextarea"
      safe-area-inset-bottom
      closeable
      get-container="body"
      position="center"
      style="width: 50vw; height: 250px"
      class="rejectPopup"
    >
      <div class="popup-content">
        <div style="font-size: 24px; margin: 15px 0 0 15px">驳回理由</div>
        <div
          class="popup-content__content"
          style="font-size: 16px; padding: 0 15px; box-sizing: border-box"
        >
          <textarea rows="4" ref="recallContent"></textarea>
        </div>
        <div
          class="popup-content__footer"
          style="display: flex; justify-content: center"
        >
          <van-button
            native-type="button"
            type="info"
            block
            @click="recallInfo()"
            >确定</van-button
          >
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import HPDFViewer from "@/components/HPDFViewer";
import {
  Field,
  Col,
  Row,
  NavBar,
  Icon,
  Sidebar,
  SidebarItem,
  List,
  Cell,
  SwipeCell,
  PullRefresh,
  Tag,
  Popup,
  Button,
  TreeSelect,
  Notify,
} from "vant";
import {
  getSampleDataPage,
  getApplyTicket,
  rejectSampleData,
} from "@/api/check";
import MaterialType from "@/components/MaterialType";
import MaterialName from "@/components/MaterialName";
import UrgencyDegree from "@/components/UrgencyDegree";

export default {
  name: "mySampling",
  components: {
    [Field.name]: Field,
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Sidebar.name]: Sidebar,
    [SidebarItem.name]: SidebarItem,
    [List.name]: List,
    [Cell.name]: Cell,
    [PullRefresh.name]: PullRefresh,
    [Tag.name]: Tag,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [TreeSelect.name]: TreeSelect,
    [SwipeCell.name]: SwipeCell,
    [Col.name]: Col,
    [Row.name]: Row,
    [Notify.name]: Notify,
    MaterialType,
    MaterialName,
    UrgencyDegree,
		HPDFViewer
  },
  data() {
    return {
      isRouterAlive: true,
      materialType: "",
      materialCode: "",
      emergencyDegree: "",
      showFiltering: false,
      list: [],
      loading: false,
      finished: false,
      error: false,
      token: "",
      finished: false,
      showPdf: false,
      pdfh5: null,
      showTextarea: false,
      testId: "",
      failMsg: "",
			pdfUrl:''
    };
  },
  watch: {},
  created() {
    this.token = localStorage.getItem("tokenKey");
    this.fetchList();
  },
  methods: {
    fetchList() {
      var queryParams = {
        Rows: "",
        Page: 1,
        Search: [this.materialCode, this.materialType, this.emergencyDegree],
        Token: this.token,
      };
      getSampleDataPage(queryParams)
        .then((response) => {
          const { Result } = response;
          const { rows, total } = Result;
          this.list = rows;
          if (this.list.length == 0) {
            this.finished = true;
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
          this.error = true;
        });
    },
    clickLeft() {
      this.$router.replace({ name: "home" });
    },
    clickRight() {
      this.showFiltering = true;
    },
    handlerCellClick(e, params) {
      // console.log(e, params);
      var paramData = JSON.stringify(params);
      if (params.type == "stability") {
        this.$router.push({
          name: "addStabilityItem",
          params: {
            paramData: paramData,
          },
        });
      } else if (params.originType == "Dept") {
        this.$router.push({
          name: "addSampleItem",
          params: {
            paramData: paramData,
          },
        });
      } else {
        var paramData = JSON.stringify(params);
        this.$router.push({
          name: "addSampleCompany",
          params: {
            paramData: paramData,
          },
        });
      }
    },
    seeInfo(v) {
      
      var result = {
        iautoid: v.iautoid,
        Token: this.token,
        Tickets: [
          { code: "MaterialName", name: "名称", value: "", group: "" },
          { code: "Origin", name: "单位", value: "", group: "" },
          { code: "OriginType", name: "供应类型", value: "", group: "" },
          { code: "TestID", name: "编号", value: "", group: "" },
          { code: "BatchID", name: "批号", value: "", group: "" },
          { code: "Standard", name: "规格", value: "", group: "" },
          { code: "DeptmentName", name: "请验部门", value: "", group: "" },
          { code: "Total", name: "数量", value: "", group: "" },
          { code: "ApplyUser", name: "申请人", value: "", group: "" },
          { code: "ApplyDate", name: "请验日期", value: "", group: "" },
          { code: "SampleUser", name: "签收人", value: "", group: "" },
          { code: "SampleDate", name: "日期", value: "", group: "" },
          { code: "TestStandard", name: "检验标准", value: "", group: "" },
          { code: "ProductDate", name: "生产日期", value: "", group: "" },
          { code: "EffectDate", name: "有效期", value: "", group: "" },
          { code: "ProducerName", name: "生产商", value: "", group: "" },
          { code: "ApplyRemarks", name: "请验类别", value: "", group: "" },
        ],
      };
      getApplyTicket(result)
        .then((response) => {
          const { Result } = response;
          var domain = localStorage.getItem("domainKey");
          var path = Result.path;
          if (path) {
            this.failMsg = "";
						this.showPdf = true;
						this.pdfUrl = path;
            // var pdfUrl = domain + path;
            // this.renderPdf(pdfUrl);
          } else {
						Notify({ type: "danger", message: "暂无数据" });
            // this.failMsg =
            //   '<div style="padding:20px;text-align:center;font-size:24px">暂无数据</div>';
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    renderPdf(pdfurl) {
      this.pdfh5 = true;
      this.$nextTick(() => {
        this.pdfh5 = new Pdfh5("#PDF", {
          pdfurl,
          lazy: true,
        });
      });
    },
    handleReset() {
      this.isRouterAlive = false;
      this.$nextTick(() => (this.isRouterAlive = true));
      this.materialType = "";
      this.materialCode = "";
      this.emergencyDegree = "";
    },
    handleFilter() {
      this.fetchList();
    },
    recallInfo() {
      var that = this;
      this.showTextarea = true;
      var content = this.$refs.recallContent.value;
      if (content == "") {
        Notify({ type: "danger", message: "请填写驳回原因" });
        return false;
      }

      var result = {
        testID: this.testId,
        message: this.$refs.recallContent.value,
        Token: this.token,
      };
      rejectSampleData(result)
        .then((response) => {
          Notify({ type: "success", message: response.ErrorMsg });
          for (var i = 0; i < that.list.length; i++) {
            if (that.list[i].testID == that.testId) {
              that.list.splice(i, 1);
              that.showTextarea = false;
              return false;
            }
          }
        })
        .catch(() => {});
    },
  },
};
</script>

<style>
.rejectPopup .van-icon {
  top: 8px !important;
  right: 10px !important;
  font-size: 20px;
}
</style>

<style lang="less" scoped>
// /deep/ .van-field__body {
//   border: 1px solid #ccc;
// }
.nav-bar {
  background-color: #3eb4f8;
}
.ty-container {
  // min-height: 100vh;
  -webkit-overflow-scrolling: touch;
  background-color: @background-color;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
  position: relative;
  .content {
    box-sizing: border-box;
    padding-top: 50px;
    height: 100%;
    overflow: auto;
  }
}

.custom-title {
  flex: 1;
  width: 0;
  .custom-label > div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.custom-value {
  flex: none;
}

.van-tree-select {
  margin-top: 44px;
}

.van-popup__left-button-box {
  position: absolute;
  left: 14px;
  top: 13px;
}
.popup-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  // .popup-content__content,
  // .popup-content__footer {
  //   // overflow: auto;
  // }
  .popup-content__content textarea {
    width: 100%;
    border: 1px solid #ccc;
  }
  .popup-content__footer {
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    button {
      height: 30px;
    }
  }
}
// /deep/.van-field__body input{
//   border-radius: 3px;
// }
</style>